<template>
    <div class="CesiumPointLable">
        <div id="cesiumContainer"></div>
        <custum-info-box title="标题1" :info="infoText" lng="-122.1958" lat="46.1915"  />
        <custum-info-box title="标题2" :info="infoText" lng="-122.1958" lat="47.1915"  />
        <custum-info-box title="标题3" :info="infoText" lng="-121.1958" lat="46.1915"  />
    </div>
</template>

<script>
    import CustumInfoBox from "../CustomInfoBox";
    export default {
        name: "CesiumPointLable",
        components: {CustumInfoBox},
        data(){
            return{
                infoVisible:true,
                title:"对象属性",
                infoText: [["位置1","11"],
                    ["位置2","22"],
                    ["位置3","33"],
                    ["位置4","44"]]
            }
        },
        watch:{
        },
        methods: {
            //初始化Cesium
            cesiumReady() {
                Cesium.Ion.defaultAccessToken =
                    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNzdhOTgxZS0zMzMwLTQ4YTAtYjlkNy1kMDRmNzU3ZjI2MjgiLCJpZCI6NjIyMzUsImlhdCI6MTYyNjg1MDU1OH0.ETpPvP99Sze2XW5JByp2vyK1F6R_P9Ojn-W7OE8KeA8";
                let params = {
                    geocoder: false, //是否显示地名查找控件
                    homeButton: false,
                    // SceneModePicker: true, //是否显示投影方式控件
                    // selectionIndicator: false,
                    baseLayerPicker: false, //是否显示图层选择控件
                    navigationHelpButton: false, //是否显示帮助信息控件
                    animation: false, // 是否显示动画控件
                    // // creditContainer: "credit",
                    timeline: false, //是否显示时间线控件
                    fullscreenButton: false
                    // vrButton: false,
                    // infoBox: false, //是否显示点击要素之后显示的信息
                    // requestRenderMode: true, //启用请求渲染模式
                    // scene3DOnly: true //每个几何实例将只能以3D渲染以节省GPU内存
                    // sceneMode: 3 //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
                };
                //视角定位
                Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
                    75, // 东
                    0, // 南
                    140, // 西
                    60 // 北
                );

                window.viewer = new Cesium.Viewer("cesiumContainer", params);
                //隐藏版本信息
                window.viewer._cesiumWidget._creditContainer.style.display = "none";
                //天地图注记服务
                window.viewer.imageryLayers.addImageryProvider(
                    new Cesium.IonImageryProvider({ assetId: 3 })
                );
                window.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        -122.1958,
                        46.1915,
                        3000
                    )
                });
            },
        },
        mounted() {
            this.cesiumReady();

        },
    };
</script>
<style>
    #cesiumContainer .cesium-infoBox {
        background: rgba(27, 27, 156, 0.8);
    }
    #cesiumContainer .cesium-infoBox-title {
        background: rgba(26, 25, 113, 0.5);
    }
    #cesiumContainer button.cesium-infoBox-camera {
        display: none;
    }
    .bubble {
        text-align: center;
        position: absolute;
        padding: 15px;
        margin: 0;
        background: #fff;
        max-width: 330px;
        max-height: 200px;
    }
</style>
